<style lang="scss" scoped>
  .app-container {
    > p {
      opacity: 1;
      margin: 0 0 0 20px;
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .header {

      .el-form {
        left: 224px;
        top: 104px;
        min-height: 55px;
        opacity: 1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
        margin-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 20px;

        .el-form-item {
          margin-bottom: 10px;

          ::v-deep .el-form-item__label {
            opacity: 1;
            /** 文本1 */
            font-size: 14px;
            font-weight: 400;
            letter-spacing: -0.07px;
            line-height: 32px;
            color: rgba(3, 2, 2, 1);
            text-align: right;
            vertical-align: middle;

          }

          ::v-deep .el-form-item__content {

            .el-input {
              width: 165px;

              .el-input__inner {
                width: 165px;
                border: 1px solid rgba(127, 127, 213, 0.5);
                border-radius: 10px;
              }
            }

            .el-button {
              height: 32px;
              opacity: 1;
              border-radius: 2px;
              padding: 8px 18px;
              color: #fff;
              border: none;
              margin-left: 25px;

              &:hover {
                background: rgba(255, 73, 73, .8);
              }

              &:not(:last-child) {
                background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);

                &:hover {
                  border: none;
                  background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
                }
              }

              &:nth-child(1) {
                width: 60px;
                height: 32px;
                opacity: 1;
                border-radius: 2px;
                background: rgba(242, 243, 245, 1);
                color: rgba(0, 0, 0, 0.3);
                padding: 8px 16px 8px 16px;

                &:hover {
                  border: none;
                  background: rgb(228, 228, 228);
                }
              }
            }
          }
        }
      }
    }

    .content {
      opacity: 1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      padding-top: 15px;
      padding-bottom: 20px;

      .el-tabs {
        margin-left: 50px;

        ::v-deep .el-tabs__item {
          color: rgba(188, 195, 212, 1);
          font-size: 14px;
        }

        ::v-deep .is-active {
          color: rgba(94, 129, 244, 1) !important;
          opacity: 1;
          /** 文本1 */
          font-size: 15px;
          font-weight: 700;
          letter-spacing: 0px;
          color: rgba(94, 129, 244, 1);
        }

        ::v-deep .el-tabs__active-bar {
          background-color: rgba(94, 129, 244, 1) !important;
        }
      }

      .description-cell {
        .cell-content {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.6em;
          max-height: 3.2em;
        }
      }

      ::v-deep .el-table {
        font-size: 12px;

        .el-tooltip__popper.is-dark {
          white-space: normal;
          max-width: 200px;
          /* 或者其他合适的宽度 */
        }
      }

      ::v-deep .el-table .el-table__header-wrapper th,
      ::v-deep .el-table .el-table__fixed-header-wrapper th {
        height: 41px !important;
        opacity: 1;
        border-radius: 10px 10px, 0px, 0px;
        background: rgba(83, 90, 244, 0.1);

        /** 文本1 */
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 11.72px;
        color: rgba(83, 90, 244, 1);
        vertical-align: top;
      }

      .status {
        width: 50px;
        height: 25px;
        display: block;
        padding: 3px 0px;
        opacity: 0.9;
        border-radius: 5px;
        font-size: 11px;
        text-align: center;
        transition: opacity 0.3s ease-in-out;
      }

      .status:hover {
        opacity: 1;
      }

      .normal {
        color: #00B3A7;
        /* 深青色 */
        background-color: #E0F7FA;
        /* 浅青色 */
      }

      .tradingIn {
        color: #FFA500;
        /* 橙色 */
        background-color: #ffeac9;
        /* 浅橙色 */
      }

      .destroy {
        color: #aaa;
        /* 橙色 */
        background-color: #eee;
        /* 浅橙色 */
      }

      .soldOut {
        color: #FF0000;
        /* 红色 */
        background-color: #ffdada;
        /* 浅红色 */
      }

      .abnormal {
        color: #FF00FF;
        /* 紫色 */
        background-color: #FFE4FF;
        /* 浅紫色 */
      }

      .cancelled {
        color: #a19f9f;
        /* 紫色 */
        background-color: #ececec;
        /* 浅紫色 */
      }
    }
  }

  ::v-deep .el-dialog {
    width: 849px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    p {
      opacity: 1;
      margin: 0 0 0 20px;
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 10px;
      }
    }

    .el-button {
      width: 60px;
      height: 32px;
      opacity: 1;
      border-radius: 2px;
      background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
      padding: 8px 16px 8px 16px;
      color: #fff;
      border: none;
      margin-left: 25px;

      &:hover {
        border: none;
        background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
      }

      &:nth-child(2) {
        width: 60px;
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: rgba(242, 243, 245, 1);
        color: rgba(0, 0, 0, 0.3);
        padding: 8px 16px 8px 16px;

        &:hover {
          border: none;
          background: rgb(228, 228, 228);
        }
      }
    }

    .el-input-number {
      width: 165px;

      .el-input {
        width: 165px;

        .el-input__inner {
          width: 165px;
          border: 1px solid rgba(127, 127, 213, 0.5);
          border-radius: 0px;
        }
      }
    }

    .el-dialog__title {
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 8px;
    }
  }

  /*配置账户*/
  .account ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .left ::v-deep.el-input__inner {
    border-radius: 10px !important;
    text-align: left !important;
    padding-left: 16px !important;
  }

  .left ::v-deep.el-input-number__decrease,
  .left ::v-deep .el-input-number__increase {
    display: none !important;
  }

  .account ::v-deep.el-checkbox__inner {
    border-radius: 50% !important;
  }
</style>

<template>
  <div class="app-container">
    <p>财务管理</p>

    <div class="header">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="选择时间" prop="orderDate">
          <el-date-picker v-model="queryParams.orderDate" @change="changeTime" type="datetimerange" align="right"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          :default-time="['12:00:00', '08:00:00']"></el-date-picker>
        </el-form-item>

        <el-form-item label="销售渠道" prop="saleChannelId">
          <el-select filterable v-model="queryParams.saleChannelId" placeholder="请选择销售渠道" @change="handleQuery">
            <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
                       :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="游戏类别" prop="dictCodeId">
          <el-select filterable v-model="queryParams.dictCodeId" clearable placeholder="请选择状态" @change="handleQuery">
            <el-option v-for="(item, indx) in gameList" :key="indx" :label="item.dictLabel"
                       :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回收渠道" prop="recycleChannelId">
          <el-select filterable v-model="queryParams.recycleChannelId" clearable placeholder="请选择回收渠道" @change="handleQuery">
            <el-option v-for="item in recycleChannelList" :key="item.dictCode" :label="item.dictLabel"
                       :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="游戏账号" prop="account">
          <el-input v-model="queryParams.account" placeholder="请输入游戏账号"></el-input>
        </el-form-item>
        <el-form-item label="销售编号" prop="saleNumber">
          <el-input v-model="queryParams.saleNumber" placeholder="请输入销售编号"></el-input>
        </el-form-item>
        <el-form-item label="回收编号" prop="recycleNumber">
          <el-input v-model="queryParams.recycleNumber" placeholder="请输入回收编号"></el-input>
        </el-form-item>

        <el-form-item label="客服名称" prop="customerService">
          <el-input v-model="queryParams.customerService" placeholder="请输入客服名称"></el-input>
        </el-form-item>
        <el-form-item label="关联账户" prop="user">
          <el-input v-model="queryParams.user" placeholder="请输入客服名称"></el-input>
        </el-form-item>
        <el-form-item label="收支类型" prop="user">
          <el-select filterable v-model="queryParams.type" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收支类别" prop="user">
          <el-select filterable v-model="queryParams.category" placeholder="请选择">
            <el-option label="账号出售" value="账号出售"/>
            <el-option label="账号回收" value="账号回收"/>
            <el-option label="渠道提货" value="渠道提货"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
          <el-button type="danger" size="mini" @click="getList">刷新</el-button>
          <el-button type="primary" size="mini" @click="handleAdd()" v-hasPermi="['business:financia:add']">新增
          </el-button>
          <el-button type="warning" plain size="mini" @click="handleExport" v-hasPermi="['business:financia:export']">导出
          </el-button>
          <el-button type="warning" plain size="mini" @click="handleSettingAccount" v-hasPermi="['business:financia:listTAmount']">配置账户</el-button>
          <el-button size="mini" type="danger" @click="BulkPayments()">批量支付</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <el-tabs v-model="activeGame" @tab-click="handleGame">
        <el-tab-pane label="流水明细" name="TransactionDetail"/>
        <el-tab-pane label="应收账款" name="Receivables"/>
        <el-tab-pane label="应付账款" name="Payables"/>
        <el-tab-pane label="已销毁" name="Destroyed"/>
      </el-tabs>
      <el-table v-loading="loading" :data="recordsList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="编号" align="center" width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="收支类型" align="center" prop="financeType" width="80">
          <template slot-scope="scope">
            <el-button @click="goSearch(scope.row)" v-if="scope.row.financeType == 'Destroyed'" class="status destroy"
                       :disabled="!scope.row.unpaidRelationId">
              <i v-if="scope.row.unpaidRelationId" class="el-icon-star-on"></i> 已销毁
            </el-button>
            <div v-else>
              <el-button @click="goSearch(scope.row)" v-if="scope.row.type == 2" class="status normal"
                         :disabled="!scope.row.unpaidRelationId">
                <i v-if="scope.row.unpaidRelationId" class="el-icon-star-on"></i> 收 入
              </el-button>
              <el-button @click="goSearch(scope.row)" v-if="scope.row.type == 1" class="status tradingIn"
                         :disabled="!scope.row.unpaidRelationId">
                <i v-if="scope.row.unpaidRelationId" class="el-icon-star-on"></i> 支 出
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime"/>
        <el-table-column label="支付时间" v-if="activeGame == 'TransactionDetail'" align="center" prop="toPayTime"/>
        <el-table-column label="类别" align="center" prop="category" width="80"></el-table-column>
        <el-table-column label="游戏" align="center" prop="dictCodeName"/>
        <el-table-column label="账号" align="center" prop="account"/>
        <el-table-column label="销售渠道" align="center" prop="saleChannelName"/>
        <el-table-column label="回收渠道" align="center" prop="bindingChannelName"/>
        <el-table-column label="销售金额" align="center" prop="saleAmount"/>
        <el-table-column label="收入金额" align="center" prop="incomeAmount"/>
        <el-table-column label="销售利润 " v-if="activeGame == 'Receivables' || activeGame == 'TransactionDetail'"
                         align="center" prop="saleProfit"/>
        <el-table-column label="回收金额" align="center" prop="recycleAmount"
                         v-if="activeGame == 'Receivables' || activeGame == 'TransactionDetail'"/>
        <el-table-column label="换绑手机 " v-if="activeGame == 'Receivables'" align="center" prop="changePhone"/>

        <el-table-column v-if="activeGame == 'Payables' || activeGame == 'TransactionDetail'" label="支出金额"
                         align="center" prop="expenseAmount"/>
        <el-table-column v-if="activeGame == 'Payables'" :key="'collectionAccount-' + activeGame" label="收款账号"
                         align="center" prop="collectionAccount"/>
        <el-table-column label="凭证" align="center" prop="voucher">
          <template slot-scope="scope">
            <img :src="scope.row.images" alt="">
          </template>
        </el-table-column>
        <el-table-column label="供货商家" align="center" prop="supplier"/>
        <el-table-column label="回收客服" align="center" prop="recycleName"/>
        <el-table-column label="换绑客服" align="center" prop="changeName"/>
        <el-table-column label="销售客服" align="center" prop="salesCustomerName"/>
        <el-table-column label="账号编号" align="center" prop="identifying" min-width="80" />
        <el-table-column label="销售编号" align="center" prop="saleNumber"/>
        <el-table-column label="回收编号" :key="'recycleNumber-' + activeGame" align="center" prop="recycleNumber"/>
        <el-table-column v-if="activeGame == 'Receivables' || activeGame == 'Payables'" :key="'voucher-' + activeGame"
                         label="是否支付" align="center" prop="voucher">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isPay == 1 && activeGame == 'Receivables'" size="mini" @click="handlePay(scope.row)"
                       v-hasPermi="['business:financia:toPay']"> 去收款
            </el-button>
            <el-button v-if="scope.row.isPay == 1 && activeGame == 'Payables'" size="mini" @click="handlePay(scope.row)"
                       v-hasPermi="['business:financia:toPay']"> 去支付
            </el-button>
            <el-button v-if="scope.row.isPay == 2" class="status destroy" disabled>
              已支付
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1" class="status normal">已收款</span> <span v-if="scope.row.status == 2"
                                                                                      class="status tradingIn">已付款</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark"/>
        <el-table-column v-if="activeGame == 'TransactionDetail'" label="联动金额" align="center"
                         :key="'linkedAmount-' + activeGame" prop="linkedAmount"/>
        <el-table-column label="关联账户" align="center" prop="user"/>
        <el-table-column v-if="activeGame == 'Payables' || activeGame == 'Receivables'" :key="'right-' + activeGame"
                         fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleOpenUpdate(scope.row)"
                       v-hasPermi="['business:financia:edit']">
              <span style="color: rgba(83, 90, 244, 1);margin-right: 5px;">编辑</span>
            </el-button>
            <el-popconfirm title="您确定销毁吗？" @confirm="handleToDestroy(scope.row)">
              <el-button slot="reference" size="mini" type="text" v-hasPermi="['business:financia:toDestroy']">
                <span style="color: rgba(83, 90, 244, 1);">销毁</span>
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>

    <!-- 添加对话框 -->
    <el-dialog :title="form.financeType == 'Receivables' ? '新增收入' : form.financeType == 'Payables' ? '新增支出' : '新增'"
               :visible.sync="open" width="500px" append-to-body>
      <el-form ref="addForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="收支类型/类别" prop="category">
          <el-cascader :options="categoryList" @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="游戏品类" prop="dictCodeId">
          <el-select filterable v-model="form.dictCodeId" placeholder="请选择游戏品类" filterable >
            <el-option v-for="(item, indx) in gameList" :key="indx" :label="item.dictLabel"
                       :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入账号"/>
        </el-form-item>
        <div v-if="form.financeType == 'Receivables'">
          <el-form-item label="销售渠道" prop="saleChannelId">
            <el-select filterable v-model="form.saleChannelId" placeholder="请选择销售渠道" filterable >
              <el-option v-for="   item  in saleChannelList   " :key="item.dictCode" :label="item.dictLabel"
                         :value="item.dictCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收入金额" prop="incomeAmount">
            <el-input v-model="form.incomeAmount" placeholder="请输入收入金额"/>
          </el-form-item>
          <el-form-item label="供货商家" prop="supplier">
            <el-input v-model="form.supplier" placeholder="请输入供货商家"/>
          </el-form-item>
          <el-form-item label="销售单号" prop="saleNumber">
            <el-input v-model="form.saleNumber" placeholder="请输入销售单号"/>
          </el-form-item>
          <el-form-item label="换绑手机" prop="changePhone">
            <el-input v-model="form.changePhone" placeholder="请输入换绑手机"/>
          </el-form-item>
          <el-form-item label="换绑客服" prop="changeId">
            <el-select filterable v-model="form.changeId" placeholder="请选择换绑客服" filterable >
              <el-option v-for="  item   in   changeList  " :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="回收客服" prop="recycleUserId">
            <el-select filterable v-model="form.recycleUserId" placeholder="请选择回收客服" filterable >
              <el-option v-for="  item   in   recycleList  " :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售客服" prop="salesCustomerId">
            <el-select filterable v-model="form.salesCustomerId" placeholder="请选择销售客服" filterable >
              <el-option v-for="  item   in   sellList  " :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div v-if="form.financeType == 'Payables'">
          <el-form-item label="回收渠道" prop="recycleChannelId">
            <el-select v-model="form.recycleChannelId" placeholder="请选择游戏品类" filterable >
              <el-option v-for="item in recycleChannelList" :key="item.dictCode" :label="item.dictLabel"
                         :value="item.dictCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支出金额" prop="expenseAmount">
            <el-input v-model="form.expenseAmount" placeholder="请输入支出金额"/>
          </el-form-item>
          <el-form-item label="回收单号" prop="recycleNumber">
            <el-input v-model="form.recycleNumber" placeholder="请输入回收单号"/>
          </el-form-item>
          <el-form-item label="换绑客服" prop="changeId">
            <el-select v-model="form.changeId" placeholder="请选择换绑客服" filterable >
              <el-option v-for="item in changeList" :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="回收客服" prop="recycleUserId">
            <el-select v-model="form.recycleUserId" placeholder="请选择回收客服" filterable >
              <el-option v-for="item in recycleList" :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收款账号" prop="collectionAccount">
            <el-input v-model="form.collectionAccount" placeholder="请输入收款账号"/>
          </el-form-item>
        </div>
        <el-form-item label="上传凭证：">
          <el-upload class="avatar-uploader" :action="$baseURL + '/common/upload'" :show-file-list="false"
                     :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="form.images" :src="form.images" class="avatar"> <i v-else
                                                                          class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="openUpdate" width="50%" append-to-body>
      <el-form ref="editForm" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="收支类型/类别" prop="financeTypeName">
              <el-input disabled v-model="form.financeTypeName" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间" prop="createTime">
              <el-input disabled v-model="form.createTime" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类别" prop="">
              <el-input disabled v-model="form.category" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="游戏品类" prop="">
              <el-select disabled v-model="form.dictCodeId" placeholder="请选择游戏品类" filterable >
                <el-option v-for="(item, indx) in gameList" :key="indx" :label="item.dictLabel" :value="item.dictCode"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账号" prop="account">
              <el-input disabled v-model="form.account" placeholder="请输入收入金额"/>
            </el-form-item>
          </el-col>
          <div v-if="form.financeType == 'Receivables'">
            <el-col :span="8">
              <el-form-item label="销售渠道" prop="saleChannelId">
                <el-select disabled v-model="form.saleChannelId" placeholder="请选择销售渠道" filterable >
                  <el-option v-for="   item  in saleChannelList   " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收入金额" prop="incomeAmount">
                <el-input v-model="form.incomeAmount" placeholder="请输入收入金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供货商家" prop="supplier">
                <el-input disabled v-model="form.supplier" placeholder="请输入供货商家"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售单号" prop="saleNumber">
                <el-input disabled v-model="form.saleNumber" placeholder="请输入收/付金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="换绑手机" prop="changePhone" :rules="{ required: true, validator: validateChange }">
                <el-input v-model="form.changePhone" placeholder="请输入换绑手机"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="换绑客服" prop="changeId">
                <el-select disabled v-model="form.changeId" placeholder="请选择换绑客服" filterable >
                  <el-option v-for="item in changeList" :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="回收客服" prop="recycleUserId">
                <el-select disabled v-model="form.recycleUserId" placeholder="请选择回收客服" filterable >
                  <el-option v-for="item in recycleList" :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售客服" prop="salesCustomerId">
                <el-select disabled v-model="form.salesCustomerId" placeholder="请选择销售客服" filterable >
                  <el-option v-for="item in sellList" :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="form.financeType == 'Payables'">
            <el-col :span="8">
              <el-form-item label="回收渠道" prop="recycleChannelId">
                <el-select disabled v-model="form.recycleChannelId" placeholder="请选择游戏品类" filterable >
                  <el-option v-for="item in recycleChannelList" :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支出金额" prop="expenseAmount">
                <el-input v-model="form.expenseAmount" placeholder="请输入收/付金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="回收单号" prop="recycleNumber">
                <el-input disabled v-model="form.recycleNumber" placeholder="请输入收/付金额"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="换绑客服" prop="changeId">
                <el-select disabled v-model="form.changeId" placeholder="请选择换绑客服" filterable >
                  <el-option v-for="item in changeList" :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="回收客服" prop="recycleUserId">
                <el-select disabled v-model="form.recycleUserId" placeholder="请选择回收客服"  filterable >
                  <el-option v-for="item in recycleList" :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收款账号" prop="collectionAccount">
                <el-input v-model="form.collectionAccount" placeholder="请输入收款账号"/>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上传凭证：">
              <el-upload class="avatar-uploader" :action="imgUrl + '/common/upload'" :show-file-list="false"
                         :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="form.imagess && form.imagess.length>0" :src="form.imagess[0]" class="avatar"> <i v-else
                                                                              class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 去支付 -->
    <el-dialog :title="form.financeType == 'Receivables' ? '应收账款' : '应付账款'" :visible.sync="openPay" width="60%"
               append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>

          <el-col :span="24">
            <el-form-item label="收支类型/类别" prop="financeTypeName">
              <el-input disabled v-model="form.financeTypeName" placeholder=""/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="类别">
              <el-input disabled v-model="form.category" placeholder=""/>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="游戏品类">
              <el-select disabled v-model="form.dictCodeId" placeholder="请选择游戏品类">
                <el-option v-for="(item, indx) in gameList" :key="indx" :label="item.dictLabel"
                           :value="item.dictCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="账号" prop="account">
              <el-input disabled v-model="form.account" placeholder="请输入收入金额"/>
            </el-form-item>
          </el-col>

          <!--应收-->
          <el-col :span="8" v-if="form.financeType == 'Receivables'">
            <el-form-item label="销售渠道" prop="saleChannelId">
              <el-select disabled v-model="form.saleChannelId" placeholder="请选择销售渠道">
                <el-option v-for="(item, indx) in saleChannelList" :key="indx" :label="item.dictLabel"
                           :value="item.dictCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Receivables'">
            <el-form-item label="收入金额" prop="incomeAmount">
              <el-input v-model="form.incomeAmount" placeholder="请输入收入金额"/>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Receivables'">
            <el-form-item label="销售单号" prop="saleNumber">
              <el-input disabled v-model="form.saleNumber" placeholder="请输入收/付金额"/>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Receivables'">
            <el-form-item label="换绑客服" prop="changeId">
              <el-select disabled v-model="form.changeId" placeholder="请选择换绑客服">
                <el-option v-for="(item, indx) in changeList" :key="indx" :label="item.userName" :value="item.userId"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Receivables'">
            <el-form-item label="回收客服" prop="recycleUserId">
              <el-select disabled v-model="form.recycleUserId" placeholder="请选择回收客服">
                <el-option v-for="(item, indx) in recycleList" :key="item.userId" :label="item.userName"
                           :value="item.userId"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Receivables'">
            <el-form-item label="销售客服" prop="salesCustomerId">
              <el-select disabled v-model="form.salesCustomerId" placeholder="请选择销售客服">
                <el-option v-for="(item, indx) in sellList" :key="indx" :label="item.userName" :value="item.userId"/>
              </el-select>
            </el-form-item>
          </el-col>

          <!--应付-->
          <el-col :span="8" v-if="form.financeType == 'Payables'">
            <el-form-item label="回收渠道" prop="recycleChannelId">
              <el-select disabled v-model="form.recycleChannelId" placeholder="请选择游戏品类">
                <el-option v-for="(item, indx) in recycleChannelList" :key="indx" :label="item.dictLabel"
                           :value="item.dictCode"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Payables'">
            <el-form-item label="支出金额" prop="expenseAmount">
              <el-input v-model="form.expenseAmount" placeholder="请输入收/付金额"/>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Payables'">
            <el-form-item label="回收单号" prop="recycleNumber">
              <el-input disabled v-model="form.recycleNumber" placeholder="请输入收/付金额"/>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Payables'">
            <el-form-item label="换绑客服" prop="changeId">
              <el-select disabled v-model="form.changeId" placeholder="请选择换绑客服">
                <el-option v-for="(item, indx) in changeList" :key="item.userId" :label="item.userName"
                           :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Payables'">
            <el-form-item label="回收客服" prop="recycleUserId">
              <el-select disabled v-model="form.recycleUserId" placeholder="请选择回收客服">
                <el-option v-for="(item, indx) in recycleList" :key="item.userId" :label="item.userName"
                           :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="form.financeType == 'Payables'">
            <el-form-item :label="form.financeType=='Payables'?'付款账号':'收款账号'" prop="collectionAccount">
              <el-input v-model="form.collectionAccount" placeholder="请输入收款账号"/>
            </el-form-item>
          </el-col>

          <!--新增字段-->
          <el-col :span="8">
            <el-form-item label="订单状态" prop="ordernotCompleted" class="account">
              <el-checkbox v-model="form.ordernotCompleted">订单未完结</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="支付账号" prop="amountId">
              <el-select v-model="form.amonitId" placeholder="请选择销售客服" @change="handleAccountChange">
                <el-option v-for="(item, indx) in accountList" :key="indx" :label="item.user + ':' + item.accountNumber"
                           :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="账户余额" prop="saleNumber">
              <el-input disabled v-model="form.totalAmount" placeholder="请输入账户余额"/>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上传凭证：">
              <el-upload class="avatar-uploader" :action="$baseURL + '/common/upload'" :show-file-list="false"
                         :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="form.images" :src="form.images" class="avatar"> <i v-else
                                                                              class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitToPay">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--配置账户-->
    <el-dialog title="配置账户" :visible.sync="settingShow" append-to-body width="50%">
      <el-form ref="form" label-width="120px">
        <el-row v-for="(item, indx) in accountList" :key="indx">
          <el-col :span="7">
            <el-form-item label="账户名称" prop="item.user">
              <el-input v-model="item.user" clearable placeholder="请输入账户名称" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="7" class="account">
            <el-form-item label="账号" prop="item.accountNumber">
              <el-input type="number" clearable oninput="if(value.length > 12) value=value.slice(0,12)"
                        v-model="item.accountNumber" placeholder="请输入账号" max="10" maxlength="10"/>
            </el-form-item>
          </el-col>
          <el-col :span="7" class="left">
            <el-form-item label="账户余额" prop="item.totalAmount">
              <el-input-number clearable v-model="item.totalAmount" :precision="2" :step="0.1"
                               :max="10000"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="text-align: center;line-height: 34px;">
            <span style="cursor: pointer;color: #F56C6C;user-select: none;"
                  @click="handleDelAccount(item, indx)">删除</span>
          </el-col>
        </el-row>
        <el-row style="text-align: center;color: #7391FC;">
          <span style="cursor: pointer;user-select: none;" @click="handleAddAccount">新增账户</span>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmitAccount">确 定</el-button>
        <el-button @click="settingShow = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--批量支付 选择配置账户-->
    <el-dialog title="配置账户选择" :visible.sync="patchPayShow" append-to-body width="400px">
      <el-form ref="form" label-width="120px" class="patchPay">
        <el-row>
          <el-col :span="24">
            <el-form-item label="支付账号">
              <el-select v-model="patchPayForm.id" placeholder="请选择支付账号" style="width:200px;"
                         @change="handlePatchPayChange">
                <el-option v-for="(item, indx) in accountList" :key="indx" :label="item.accountNumber"
                           :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="账户名称" prop="item.user">
              <el-input readonly v-model="patchPayForm.user" style="width:200px;" placeholder="请输入账户名称" maxlength="20"
                        width="200"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="账户余额" prop="saleNumber">
              <el-input readonly v-model="patchPayForm.totalAmount" placeholder="请输入账户余额"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePatchPayConfirm">确 定</el-button>
        <el-button @click="patchPayShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {
        listRecords,
        getRecords,
        delRecords,
        addRecords,
        updateRecords,
        getInfo,
        toPay,
        toDestroy,
        update,
        bulkPayments,
        settingAccount,
        listAmount,
        delAmount
    } from '@/api/business/finance';
    import env from "@/utils/config.js";

    export default {
        data() {
            return {
                imgUrl: '',//上传图片地址
                /**
                 * 收入支出
                 */
                options: [{
                    value: '2',
                    label: '收入'
                }, {
                    value: '1',
                    label: '支出'
                }],
                patchPayShow: false,//批量支付
                patchPayForm: {
                    id: '',
                    grmountList: [],
                    totalAmount: '',
                    user: '',
                    accountNumber: ''
                },
                settingShow: false,//配置账户
                settingFormField: {
                    totalAmount: '账户余额',//账户余额
                    user: '账户名称',//账户名称
                    accountNumber: '账号',//账号
                },
                accountList: [],//账户配置列表
                recordsList: [], // 这里填入您的行数据
                selectedIds: [],  // 用于保存选中行的ID
                checked: false,
                //选中的tab
                activeGame: 'TransactionDetail',
                // 遮罩层
                loading: true,
                // 选中数组
                idsids: [],
                selectedArr: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 表格数据
                recordsList: [],
                //换绑客服
                changeList: [],
                //回收客服
                recycleList: [],
                //销售客服
                sellList: [],
                //游戏列表
                gameList: [],
                //回收渠道
                recycleChannelList: [],
                //销售渠道
                saleChannelList: [],
                //收支类别
                categoryList: [{
                    value: 'Receivables',
                    label: '收入',
                    children: [{
                        value: '账号出售',
                        label: '账号出售'
                    }, {
                        value: '找回赔付',
                        label: '找回赔付'
                    }, {
                        value: '其他',
                        label: '其他'
                    }]
                }, {
                    value: 'Payables',
                    label: '支出',
                    children: [{
                        value: '借款',
                        label: '借款'
                    }, {
                        value: '账号回收',
                        label: '账号回收'
                    }, {
                        value: '找回赔付',
                        label: '找回赔付'
                    }, {
                        value: '其他',
                        label: '其他'
                    }, {
                        value: '话费充值',
                        label: '话费充值'
                    }, {
                        value: '实物报销',
                        label: '实物报销'
                    }]
                }],
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
                openPay: false,
                openUpdate: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    type: null,
                    category: null,
                    dictCodeId: null,
                    account: null,
                    saleChannelId: null,
                    recycleChannelId: null,
                    saleAmount: null,
                    incomeAmount: null,
                    expenseAmount: null,
                    voucher: null,
                    supplier: null,
                    recycleUserId: null,
                    changeId: null,
                    salesCustomerId: null,
                    saleNumber: null,
                    recycleNumber: null,
                    status: null,
                    linkedAmount: null,
                    financeType: 'TransactionDetail',
                    changePhone: null,
                    // orderDate:null,
                    startDate: null,
                    endDate: null,
                    customerService: null
                },
                // 表单参数
                form: {
                    changePhone: ''
                },
                // 表单校验
                rules: {
                    category: [{required: true, message: '类别不能为空', trigger: 'blur'}],
                    dictCodeId: [{required: true, message: '游戏品类不能为空', trigger: 'blur'}]
                }
            }
        },
        created() {
            this.imgUrl = env;
            this.getList()
            //查询游戏列字典
            this.getDicts('game_category').then(res => {
                this.gameList = res.data
            })
            //查询回收渠道字典
            this.getDicts('recycle_channel').then(res => {
                this.recycleChannelList = res.data
            })
            //查询销售渠道
            this.getDicts('sale_channel').then(res => {
                this.saleChannelList = res.data
            })
            //查询回收客服
            this.passPost('recycle').then(res => {
                this.recycleList = res.data
            })
            //查询换绑客服
            this.passPost('change').then(res => {
                this.changeList = res.data
            })
            //查询销售客服
            this.passPost('sell').then(res => {
                this.sellList = res.data
            });

            // 获取账户配置
            this.getSettingAccount();
        },
        methods: {
            // 批量付款
            BulkPayments() {
                if (this.activeGame != 'Receivables' && this.activeGame != 'Payables') return this.$message.error('请选择“应收账款”或“应付账款”进行支付！');
                if (this.selectedArr.length == 0) return this.$message.error('请先选择需要支付的记录！');
                this.patchPayShow = true;
            },

            // 批量支付模态框
            handlePatchPayChange(e) {
                let account = this.accountList.find(i => i.id == e);
                if (account != undefined) {
                    this.patchPayForm.id = account.id;
                    this.patchPayForm.totalAmount = account.totalAmount;
                    this.patchPayForm.user = account.user;
                    this.patchPayForm.accountNumber = account.accountNumber;
                    this.$forceUpdate();
                }
            },

            // 批量提交
            handlePatchPayConfirm() {
                this.selectedArr.map(i => {
                    this.patchPayForm.grmountList.push({
                        integers: i.id,
                        financeTypeS: i.financeType
                    })
                });

                bulkPayments(this.patchPayForm).then(response => {
                    if (response.code == 200) {
                        this.$message.success('批量支付成功');
                        this.patchPayShow = false;
                        this.getList()
                    } else {
                        this.$message.error(response.msg);
                    }
                });
            },

            // 手机号验证
            validateChange(rule, value, callback) {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    return callback(new Error('手机号格式有误！'));
                } else {
                    return callback();
                }
            },

            // 支付账户选择 返回的id
            handleAccountChange(e) {
                let account = this.accountList.find(i => i.id == e);
                if (account != undefined) {
                    this.form.totalAmount = account.totalAmount;
                    this.$forceUpdate();
                }
            },

            // 打开配置账户
            handleSettingAccount() {
                this.settingShow = true;
                this.getSettingAccount();
            },

            // 查询配置账户
            getSettingAccount() {
                listAmount().then(res => {
                    if (res.data.length == 0) {
                        this.accountList = [{
                            totalAmount: '',//账户余额
                            user: '',//账户名称
                            accountNumber: '',//账号
                        }];
                    } else {
                        this.accountList = res.data;
                    }
                });
            },

            // 新增配置账户
            handleAddAccount() {
                this.accountList.push({
                    id: '',
                    totalAmount: '',//账户余额
                    user: '',//账户名称
                    accountNumber: '',//账号
                });
            },

            // 删除配置账户
            handleDelAccount(item) {
                if (this.accountList.length == 1) {
                    return this.$message.error("请保留至少一个表单！");
                }
                this.$confirm('您确定要删除账户名称为：“' + item.user + '”的账户记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delAmount(item.id).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            // 更新列表
                            this.getSettingAccount();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                })
            },

            // 提交账户
            handleSubmitAccount() {
                let flag = false;
                // 验证
                this.accountList.map((item, indx) => {
                    for (let key in item) {
                        if (!item[key] && key != 'totalAmount' && key != "id") {
                            this.$message.error("第" + (indx + 1) + "行 " + this.settingFormField[key] + "不能为空！");
                            flag = false;
                            break;
                        } else {
                            flag = true;
                        }
                    }
                });

                if (flag) {
                    settingAccount(this.accountList).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.settingShow = false;
                            // 重置
                            this.getSettingAccount();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                }
            },

            //去销毁 确认
            handleToDestroy(row) {
                const obj = {
                    ...row,
                    financeType: 'Destroyed'
                }
                toDestroy(obj)
                    .then(res => {
                        this.$modal.msgSuccess('销毁成功')
                        this.getList()
                    })
            },

            //打开更新弹框
            handleOpenUpdate(row) {
                this.form = {
                    imagess:[],
                    ...row,
                    financeTypeName: row.financeType == 'Receivables' ? '收入' : '支出',
                    dictCodeId: Number(row.dictCodeId),
                }
                this.openUpdate = true
            },

            //查找对应账款
            goSearch(row) {
                getInfo({
                    id: row.unpaidRelationId,
                    financeType: row.financeType
                }).then(res => {
                    //如果是应收账款
                    this.activeGame = res.data.financeType
                    this.recordsList = [res.data]

                })
            },

            //打开去支付模态框
            handlePay(row) {
                if (this.accountList.length == 0 || this.accountList[0].user == '') {
                    return this.$message.error("您还没有配置账户信息，请添加！");
                }

                this.form = {
                    ...row,
                    financeTypeName: row.financeType == 'Receivables' ? '收入' : '支出',
                    dictCodeId: Number(row.dictCodeId)
                }
                this.openPay = true
            },
            //选择财务类型
            handleChange(value) {
                this.form.financeType = value[0];
                this.form.category = value[1];
            },
            changeTime(value) {
                if (value && value.length === 2) {
                    // value[0] 和 value[1] 分别是开始和结束日期的 Date 对象
                    let startDate = this.formatDate(value[0])
                    let endDate = this.formatDate(value[1])
                    this.queryParams.startDate = startDate
                    this.queryParams.endDate = endDate
                    this.getList()
                }
            },
            formatDate(date) {
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                let hours = date.getHours()
                let minutes = date.getMinutes()
                let seconds = date.getSeconds()

                // 格式化每个部分，确保始终是两位数字
                month = month < 10 ? '0' + month : month
                day = day < 10 ? '0' + day : day
                hours = hours < 10 ? '0' + hours : hours
                minutes = minutes < 10 ? '0' + minutes : minutes
                seconds = seconds < 10 ? '0' + seconds : seconds

                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
            },
            handleAvatarSuccess(response, file) {
                // 假设服务器响应的数据中包含了文件路径 'url'
                this.$nextTick(() => {
                    // 这里放置您想要在1秒后执行的代码
                    this.$set(this.form,'imagess',[]);
                    this.form.imagess.push( response.url);
                })
            },
            beforeAvatarUpload(file) {
                const isJPEG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const jsJPG = file.type === 'image/jpg'
                // const isLt2M = file.size / 1024 / 1024 < 10
                if (!isJPEG && !isPNG && !jsJPG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
                    return false
                }
                return true;
            },
            //切换Tab
            handleGame(tab, event) {
                this.queryParams.financeType = tab.name
                this.getList()
            },
            /** 查询列表 */
            getList() {
                this.loading = true
                listRecords(this.queryParams).then(response => {
                    this.recordsList = response.rows
                    this.total = response.total
                    this.loading = false
                })
            },
            // 取消按钮
            cancel() {
                this.open = false
                this.openUpdate = false
                this.openPay = false
                this.reset()
            },
            // 表单重置
            reset() {
                this.form = {
                    type: null
                }
                this.resetForm('form')
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm('queryForm')
                this.handleQuery()
                this.queryParams.endDate = ''
                this.queryParams.startDate = ''
            },

            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id);
                this.selectedArr = selection;
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset()
                this.open = true
                this.title = '添加'
            },

            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset()
                const id = row.id || this.ids
                getRecords(id).then(response => {
                    this.form = response.data
                    this.open = true
                    this.title = '修改'
                })
            },
            //去支付 提交
            submitToPay() {
                if (!this.form.amonitId) return this.$message.error("请选择支付账号！");
                if (this.form.ordernotCompleted) this.form.ordernotCompleted = 1
                if (!this.form.ordernotCompleted) this.form.ordernotCompleted = 0;

                toPay(this.form).then(response => {
                    this.$modal.msgSuccess('修改成功')
                    this.open = false
                    this.openUpdate = false
                    this.openPay = false
                    this.getList()
                })
            },

            /** 提交按钮 */
            submitForm(form) {
                this.$refs[form].validate(valid => {
                    if (valid) {
                        console.log(this.form)
                        if (this.form.id != null) {
                            updateRecords(this.form).then(response => {
                                this.$modal.msgSuccess('修改成功')
                                this.open = false
                                this.openUpdate = false
                                this.getList()
                            })
                        } else {
                            addRecords(this.form).then(response => {
                                this.$modal.msgSuccess('新增成功')
                                this.open = false
                                this.openUpdate = false
                                this.getList()
                            })
                        }
                    }
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids
                this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function () {
                    return delRecords(ids)
                }).then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                }).catch(() => {
                })
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download('/business/finance/export', {
                    ...this.queryParams
                }, `records_${new Date().getTime()}.xlsx`)
            }
        }
    }
</script>
